<template>
  <el-form-item :label="label" :size="size">
    <el-row :gutter="20" style="width: 100%">
      <el-col :span="14" style="display: flex">
        <el-date-picker v-model="leaveApplyDate" style="width: 100%" type="date" placeholder="选择日期" @change="handleChangeDatePicker" :disabled-date="disabledDateStart" :cell-class-name="bandCellClassName" />
      </el-col>
      <el-col :span="10" style="display: flex">
        <el-radio-group v-model="leaveApplyTime" style="width: 100%" size="default" v-if="showFlag" @change="handleChangeLeaveApplyTime">
          <el-radio-button v-for="item in leaveApplyTimeOptions" :label="item.label" :value="item.value" />
        </el-radio-group>
      </el-col>
    </el-row>
  </el-form-item>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useUsersStore } from '../../../stores'
// import { useUsersStore, useLegalStore } from '../../../stores'
// import { formatDate } from '../../../utils'

const props = defineProps({
  label: {
    type: String,
  },
  size: {
    type: String,
  },
  leaveDuration: {
    type: Number,
  },
  modelValue: {
    type: Object as any,
  },
  disabledDateStart: {
    // 判断日期是否在当前日期之前
    type: Function as any,
    default: (time: Date) => {
      const startOfDay = new Date()
      startOfDay.setHours(0, 0, 0, 0)
      const startOfDayTimestamp = startOfDay.getTime()

      return time.getTime() < startOfDayTimestamp
    },
  },
})

const currentUser = useUsersStore().getAllState()
const emit = defineEmits(['update:modelValue'])

const leaveApplyDate = ref('')
const leaveApplyTime = ref(1)
const leaveApplyTimeOptions = ref([
  { label: '上午', value: 1, startTime: currentUser.startWorkTime, endTime: currentUser.startLunchTime },
  { label: '下午', value: 0, startTime: currentUser.endLunchTime, endTime: currentUser.endWorkTime },
])

const showFlag = computed(() => {
  return (props.leaveDuration == 2 || props.leaveDuration == 4) && leaveApplyDate.value != ''
})

const handleChangeDatePicker = () => {
  updateModelValue()
}

const handleChangeLeaveApplyTime = () => {
  updateModelValue()
}

/**
 * 更新模型值
 *
 * 在给定的请假时间选项中找到匹配的选项，并将其开始时间和结束时间转换为日期时间格式后，通过事件触发更新模型值。
 */
const updateModelValue = () => {
  let startTime = null
  let endTime = null
  if (props.leaveDuration == 3) {
    startTime = leaveApplyTimeOptions.value[0].startTime
    endTime = leaveApplyTimeOptions.value[1].endTime
  } else {
    // 在leaveApplyTimeOptions.value数组中找到value等于leaveApplyTime.value的对象
    const item = leaveApplyTimeOptions.value.find((item: any) => item.value == leaveApplyTime.value)

    // 如果找到了对应的对象
    if (item) {
      // 触发update:modelValue事件，并传递startTime和endTime的格式化时间字符串
      startTime = item.startTime
      endTime = item.endTime
    }
  }
  // console.log({ startTime: getDateTime(startTime), endTime: getDateTime(endTime) })
  emit('update:modelValue', { startTime: getDateTime(startTime), endTime: getDateTime(endTime) })
}

/**
 * 根据给定的小时和秒数更新日期时间值
 *
 * @param val 包含小时和秒数的字符串，格式为 "小时:秒"
 * @returns 更新后的日期时间对象
 */
const getDateTime = (val: any) => {
  if (leaveApplyDate.value) {
    const newValue = new Date(leaveApplyDate.value)
    let [hour, seconds] = val.split(':').map(Number)
    newValue.setHours(hour, seconds, 0, 0)
    return newValue
  } else {
    return null
  }
}

const bandCellClassName = (_: Date) => {
  let result = ''
  // const dayOfWeek = val.getDay()
  // const legalItem = useLegalStore()
  //   .getAllState()
  //   .find((item) => item.legalDate === formatDate(val, 'yyyy-MM-dd'))
  // if (dayOfWeek === 0 || dayOfWeek === 6) {
  //   result = 'leave-date-picker-cell-weekend'
  // }
  // if (legalItem) {
  //   if (legalItem.legalType === 1) {
  //     // 工作日调休
  //     result = 'leave-date-picker-cell-weekend-x'
  //   } else if (legalItem.legalType === 2) {
  //     // 法定节假日上班
  //     result = 'leave-date-picker-cell-weekend-b'
  //   }
  // }
  return result
}

watch(
  () => props.leaveDuration,
  () => {
    updateModelValue()
  }
)
</script>
